<template>
  <!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
  <view>
    <view
      class="u-index-anchor-wrapper"
      :id="$h.guid()"
      :style="[wrapperStyle]"
    >
      <view
        class="u-index-anchor"
        :class="[active ? 'u-index-anchor--active' : '']"
        :style="[customAnchorStyle]"
      >
        <slot v-if="useSlot" />
        <block v-else>
          <text>{{ index }}</text>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * indexAnchor 索引列表锚点
 * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
 * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
 * @property {Boolean} use-slot 是否使用自定义内容的插槽（默认false）
 * @property {String Number} index 索引字符，如果定义了use-slot，此参数自动失效
 * @property {Object} custStyle 自定义样式，对象形式，如"{color: 'red'}"
 * @event {Function} default 锚点位置显示内容，默认为索引字符
 * @example <u-index-anchor :index="item" />
 */
export default {
  name: "u-index-anchor",
  props: {
    useSlot: {
      type: Boolean,
      default: false,
    },
    index: {
      type: String,
      default: "",
    },
    customStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      active: false,
      wrapperStyle: {},
      anchorStyle: {},
    };
  },
  created() {
    this.parent = false;
  },
  mounted() {
    let _this = this;
    this.$nextTick(function () {
      _this.parent = _this.$h.$parent.call(_this, "u-index-list");
      if (_this.parent) {
        _this.parent.children.push(_this);
        _this.parent.updateData();
      }
    });
  },
  computed: {
    customAnchorStyle() {
      return Object.assign(this.anchorStyle, this.customStyle);
    },
  },
};
</script>

<style  scoped>
.u-index-anchor {
  width: 750px;
  height: 44px;
  line-height: 44px;
  background: #f5f5f5;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  padding-left: 24px;
}

.u-index-anchor--active {
  right: 0;
  left: 0;
}
</style>
